/**
 * 文件描述如下：
 * 1. 根据点云数据创建点云
 * 2. 使用shader材质自动更新颜色
 * 3. 在这里无法使用 其他材质控制颜色 不然会掉帧
 * 4.
 */

import { BufferGeometry, ShaderMaterial, Float32BufferAttribute, Points } from 'three'
import { PCDLoader } from '/public/lib/PCDLoader.js'
import { ElMessage } from 'element-plus'
export const addPointsCloud = (arrayBuffer) => {
  const loader = new PCDLoader()
  const newPositions = loader.parse(arrayBuffer)

  // 检查新数组长度是否为3的倍数
  if (newPositions.length % 3 !== 0) return ElMessage.error('点云数据格式错误')

  const geometry = new BufferGeometry()
  geometry.setAttribute('position', new Float32BufferAttribute(newPositions, 3))

  // 定义顶点着色器
  const vertexShader = `
    varying float vZ;

    void main() {
      vZ = position.z; // 获取 Z 坐标
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
      gl_PointSize = 1.0; // 设置点的大小
    }
  `

  // 定义片段着色器
  const fragmentShader = `
    varying float vZ;

    void main() {
      vec3 color;
      if (vZ < 1.0 && vZ > -5.25) {
        float t = (vZ + 5.25) / (1.0 + 5.25); // 映射到 0-1
        color = vec3(1.0 - t, t, 0.0); // 渐变色
      } else {
        color = vec3(0.5, 0.0, 0.5); // 默认紫色
      }
      gl_FragColor = vec4(color, 1.0); // 设置颜色
    }
  `

  // 创建 ShaderMaterial
  const material = new ShaderMaterial({
    vertexShader,
    fragmentShader,
    transparent: true,
  })

  // 创建点云
  const points = new Points(geometry, material)
  points.name = 'pcd'
  return points
}
